<template>
	<view class="container">
		<view class="container_item">
			<view class="text">
				<text>车辆品牌：</text>
				<!-- 下拉框 -->
				<!-- <select>
					<option value="">选择品牌</option>
					<option  v-for="(item,index) in brandList" :key="index"  >{{item.bname}}</option>
				</select> -->
				<uni-data-select :localdata="brandList" @change="change"></uni-data-select>
			</view>
			<view class="text">
				<text>车辆型号：</text>
				<!-- 下拉框 -->
				<!-- 	<select  >
					<option value="">选择车型</option>
					<option  v-for="(item,index) in typeList" :key="index" v-model="type">{{item.name}}</option>
				</select> -->
				<uni-data-select :localdata="typeList"></uni-data-select>
			</view>
			<view class="text">
				<text>车牌号码：</text>
				<input type="text" v-model="carNum" placeholder="请输入您的车牌号" />
			</view>	
			<view class="text">
				<text>车主姓名：</text>
				<input type="text" v-model="name" placeholder="请输入您的姓名" />
			</view>
			<view class="text">
				<text>电话号：</text>
				<input type="text" v-model="phone" placeholder="请输入您的电话" />
			</view>
		<!-- 	<view class="text">
				<text>照片：</text> -->
				<!-- 上传图片 -->
				<!-- <l-upload @complete="upload" @remove="Remove"></l-upload>
			</view> -->
		</view>
		<!-- 添加车辆 -->
		<view class="btn">
			<button @click="addCar">添加</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			brandList: [], //品牌列表
			typeList: [], //车型列表
			uid: '',
			type: '',
			carNum: '',
			brand: '',
			name:'',
			phone:'',
		};
	},
	created() {
		this.getBrand(); // 在组件创建时获取卡片数据
		this.getType();
	},
	methods: {
		change(e) {
			console.log('e', e);
			this.getType(e);
		},

		// 上传回调函数。
		upload(resp) {
			console.log(resp.imageArr);
		},
		// 图片移除回调
		Remove(resp) {
			console.log(resp.imageArr);
		},
		onChange(event) {
			console.log('选中', event.target);
		},
		getBrand() {
			uni.request({
				url: 'http://localhost:9207/brand/list',
				method: 'GET', // 请求方法
				data: {}, // 请求体，传递的数据

				success: (res) => {
					console.log('请求成功111:', res);
					// this.brandList = res.data.rows;
					if (res.data.code == 200) {
						let one = res.data.rows;
						// console.log("one",one)
						for (var i = 0; i < one.length; i++) {
							this.brandList.push({
								value: one[i].id,
								text: one[i].bname
							});
						}
						console.log('brandList', this.brandList);
					}
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			});
		},
		getType(id) {
			// console.log(id)
			uni.request({
				url: 'http://localhost:9207/type/getbrand/' + id,
				method: 'GET', // 请求方法
				data: {}, // 请求体，传递的数据
				success: (res) => {
					console.log('请求成功:', res);
					// this.typeList = res.data;
					let two = res.data;
					for (var i = 0; i < two.length; i++) {
						this.typeList.push({
							value: two[i].id,
							text: two[i].name
						});
					}
					console.log('typeList', this.typeList[0].value);
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			});
		},
		addCar() {
			uni.request({
				url: 'http://localhost:9207/info',
				method: 'POST', // 请求方法

				data: {
					uid: 4,
					type: this.typeList[0].value,
					carNum: this.carNum,
					name:this.name,
					phone:this.phone,
					
				}, // 请求体，传递的数据
				header: {
					// 'Authorization': `Bearer ${token}`
					//  'Authorization': `Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg`,
					// 'Cookie': 'Admin-Token=eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg; Admin-Expires-In=720; sidebarStatus=0'
				},
				success: (res) => {
					console.log('请求成功:', res);
					uni.redirectTo({
						url: '/pages/my/myVehicle/addSucceed'
					});
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			});
		}
	}
};
</script>

<style>
.container {
	background-image: url('/static/v2_rq2bco.png');
	/* 替换为您的图片路径 */
	background-size: cover;
	/* 覆盖整个元素，图片可能被裁剪 */
	background-position: center;
	/* 图片在元素内居中显示 */
	background-repeat: no-repeat;
	/* 图片不会重复 */
	height: 400px;
	/* 设置元素的高度 */
	width: 100%;
	/* 设置元素的宽度 */
}

.container_item {
	padding: 100px 32px 0;
}

.text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
}

.text > text {
	width: 105px;
	height: 25px;
	line-height: 25px;
	color: #101010;
	font-size: 14px;
	text-align: left;
}

.text > input {
	width: 228px;
	height: 25px;
	font-size: 14px;
	border: 1px solid #bbbbbb;
	padding: 0 5px;
}

.text > select {
	width: 228px;
	height: 25px;
	font-size: 14px;
	border: 1px solid #bbbbbb;
	padding: 0 5px;
}

/* 按钮 */
.btn {
	/* 绝对定位 */
	position: absolute;
	left: 41px;
	top: 550px;
	font-family: Roboto;
}

.btn button {
	width: 282px;
	height: 39px;
	line-height: 39px;
	font-size: 14px;
	text-align: center;
	background-color: #1d6fff;
	color: #ffffff;
	border-radius: 25px;
}
</style>
